---
import Footer from "@components/astro/UI/Footer.astro";
import Layout from "@layouts/Layout.astro";
import { SITE } from "@config";

import PlainCard from "@shadcn/card/PlainCard";
import FantasticCard from "@layouts/FantasticCard.astro";
const fantasticList = [
  {
    name: "shadcn",
    describtion: "shadcn 组件示例",
  },
  {
    name: "news",
    describtion: "news template",
  },
  {
    name: "pureSwipper",
    describtion: "纯css动画swipper",
  },
  {
    name: "music",
    describtion: "音乐",
  },
  {
    name: "swipper",
    describtion: "新概念轮播图",
  },
  {
    name: "jobSearch",
    describtion: "多条件检索模版(招聘)",
  },
  {
    name: "editor",
    describtion: "编辑器",
  },
  {
    name: "lock",
    describtion: "锁屏",
  },
];
---

<Layout activeNav="fantastic" title={`Fantastic | ${SITE.title}`}>
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
    {
      fantasticList.map((item, index) => (
        <>
          <PlainCard title={item.name}>
            {item.describtion}
          </PlainCard>
        </>
      ))
    }
  </div>

  <Footer />
</Layout>
